<template>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h1>{{ info }}</h1>
    <button @click="changeName">修改名称</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showInfo">展示信息</button>
</template>


<script lang="ts" setup name="RefInfo">
import { ref } from 'vue'

// 定义的数据都是响应式的
let name = ref("小陈")
let age = ref(20)
let info = ref({ tel: "12345", id: "999" })

function changeName() {
    name.value = "张三"
}

function changeAge() {
    age.value += 2
}

function showInfo() {
    alert(info.value)
}

</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>